<template>
	<view class="custom_form">
		<u-modal v-model="show" title="温馨提示" :content="contentText"></u-modal>
		<uni-forms ref="form" :modelValue="formData">
			<uni-forms-item class='form_item' v-for="(item ,index) in 26" :label="`第${index+1}格`" name="name" >
				<uni-easyinput type="text" v-model="formData[`label${index+1}`]" placeholder="请输入姓名" style="width:300rpx" />
				<view class="btn" @click="handleRandom(index)">随机生成</view>
			</uni-forms-item>
			
		</uni-forms>
		<view class="submit_btn"  @click="submit">
			开始游戏
		</view>
	</view>
</template>
<script>
	import feixingqi_Data from '@/utils/data/feixingqi_content.js'
	export default {
		data() {
			return {
				contentText:'请检查所有格子是否填写完成',
				// 表单数据
				formData: {
					label1: '',
					label2: '',
					label3: '',
					label4: '',
					label5: '',
					label6: '',
					label7: '',
					label8: '',
					label9: '',
					label10: '',
					label11: '',
					label12: '',
					label13: '',
					label14: '',
					label15: '',
					label16: '',
					label17: '',
					label18: '',
					label19: '',
					label20: '',
					label21: '',
					label22: '',
					label23: '',
					label24: '',
					label25 : '',
					label26  : '',
				},
				show:false,
				textContent:[],
				
			}
		},
		mounted() {
			const formData = uni.getStorageSync('customData')
			if (formData != null){
				this.formData = formData
			}
		},
		methods: {
			/**
			 * 复写 binddata 方法，如果只是为了校验，无复杂自定义操作，可忽略此方法
			 * @param {String} name 字段名称
			 * @param {String} value 表单域的值
			 */
			// binddata(name,value){
			// 通过 input 事件设置表单指定 name 的值
			//   this.$refs.form.setValue(name, value)
			// },
			// 触发提交表单
			submit() {
				let result=true
				Object.keys(this.formData).forEach(v=>{
					if(!this.formData[v]){
						result=false
					}
				})
				if(!result) return this.show=true
				//存储
				uni.setStorageSync('customData',this.formData)
				const customData=uni.getStorageSync('customData')
				console.log(customData,'customData')
				//跳转
				uni.navigateTo({
				  url:'../index?item=custom'
				})

			},
			handleRandom(index){
				this.formData[`label${index+1}`]=feixingqi_Data['hot'][	Math.floor(Math.random() * feixingqi_Data['hot'].length)]
				console.log(this.formData)
				
			}
		}
	}
</script>
<style lang="scss" scoped>
	// page{
	// 	background-color: #fff;
	// 	height:100%;
	// }
	.custom_form{
		background-color: #fff;
		padding:0 30rpx;
		uni-view, uni-text{
			background-color: #fff;
		}
		.submit_btn{
			display: flex;
			height:80rpx;
			width:120rpx;
		}
		.form_item{
		/deep/.uni-forms-item__content{
				display: flex;
				justify-content: space-between;
				align-items: center;
			.uni-easyinput__content{
				width:90%;
				
			}
			.btn{
					background-color: #efcadc;
					color:#fff;
					padding: 10rpx 19rpx;
					border-radius: 20rpx;
			}
			}
			
		}
	}
	
</style>